<template>
  <div class="info-container">
      <!-- 顶部标题部分 -->
      <div class="info-header">
          <h3>{{ photoinfo.title}}</h3>
          <p>
              <span>{{ photoinfo.add_time | dateformat | updata}}</span>
              <span>{{photoinfo.click}}次</span>
          </p>
      </div>
      <hr/>
      <!-- 缩略图 -->
      <div class="thumbs">
            <vue-preview :slides="list" @close="handleClose"></vue-preview>
      </div>
      <!-- 内容部分 -->
      <div class="info-content" v-html="photoinfo.content">
      </div>

      <!-- 评论子组件部分 -->
      <ping-lun :artid="id"></ping-lun>
  </div>
</template>

<script>
import comment from '../public/comment'
import {Toast} from 'mint-ui'
export default {
name:'PhotoInfo',
data(){
    return{
        // 获取当前页面的id
        id:this.$route.params.id,
        photoinfo:{},//图片详情
        list:[]//缩略图
    }
},
mounted(){
    this.getphotoinfo();
    this.getlist();
},
methods:{
    handleClose () {
        console.log('close event')
      },
    getphotoinfo(){
         this.$http.get('api/getimageInfo/'+this.id).then(result=>{
             let data=result.body
             if(data.status===0){
                //  console.log(data)
                 this.photoinfo=data.message[0]
             }else{
                 Toast('请求数据失败')
             }
    })
    },
    getlist(){
        this.$http.get('api/getthumimages/'+this.id).then(result=>{
            let data=result.body
            if(data.status===0){
                data.message.forEach(item => {
                    item.msrc = item.src;//外面展示的小图
                    item.w=600//设置以大图浏览时的宽度
                    item.h=400//设置以大图浏览时的高度
                });
                this.list=data.message
            }
        })
    }
},
components:{
    "ping-lun":comment
}
}
</script>
<style lang="scss" scoped>
.info-container{
    padding:.06rem .06rem 1rem;
    .info-header{
        h3{
            color: #26a2ff;
            font-size: .30rem;
            text-align: center;
            margin: .3rem 0;
        }
        p{
            display: flex;
            justify-content: space-between;
        }
    }
    .info-content{
        font-size: .28rem;
        line-height: .70rem;
    }
    .thumbs {
    /deep/ .my-gallery {
      //deep深层作用选择器
      display: flex;
      flex-wrap: wrap; //默认换行
      figure {
        width: 30%;
        margin: 5px;
        img {
          width: 100%;
          box-shadow: 0 0 8px #999;
          border-radius: 5px;
        }
      }
    }
  }

}
</style>